import React, { useState, useEffect, useCallback } from 'react';
import { Radio, Spin } from 'antd';
import OneBottom from './OneBottom';
import { flatTryCatch } from '../../../../servers/http';
import { timeOptions, timeMap } from '../constant';
import type { ITimeSpan } from '../constant';
import './OneOfOne.scss';

interface Props {
  onlyOne: any;
}

const OneOfOne: React.FC<Props> = ({ onlyOne = {} }) => {
  const [timeSpan, setTimeSpan] = useState<ITimeSpan>(timeOptions[0].value);
  const [statisticData, setStatisticData] = useState<any>({});
  const [loading, setLoading] = useState(false);

  const fetchData = useCallback(async () => {
    setLoading(true);
    const { response, error } = await flatTryCatch(onlyOne.fetchApi(timeSpan));
    setLoading(false);
    if (error) return;
    setStatisticData(response.data);
  }, [onlyOne, timeSpan]);

  // 初始化加载和timeSpan变化时加载数据
  useEffect(() => {
    if (!onlyOne.fetchApi) return;
    fetchData();
  }, [fetchData, onlyOne.fetchApi]);

  // 处理时间范围变化
  const handleTimeSpanChange = (e: any) => {
    setTimeSpan(e.target.value);
  };

  return (
    <div className="only-one-wrapper">
      <div className="only-one-radio">
        <Radio.Group
          value={timeSpan}
          onChange={handleTimeSpanChange}
          buttonStyle="solid"
          optionType="button"
          options={timeOptions}
          size="small"
        />
      </div>
      <Spin spinning={loading}>
        <div className="only-one">
          <div className="single-item">
            <div className="single-title">
              {onlyOne.title}总发送量{onlyOne.unit}
            </div>
            <div className="single-value">{statisticData.sendSuccess ?? 0}</div>
            <OneBottom time={timeMap[timeSpan]} data={statisticData} path={onlyOne.path} />
          </div>
          <div className="single-item">
            <div className="single-title">
              {onlyOne.title}发送成功量{onlyOne.unit}
            </div>
            <div className="single-value">{statisticData.sendSuccess ?? 0}</div>
            <OneBottom time={timeMap[timeSpan]} data={statisticData} path={onlyOne.path} />
          </div>
          <div className="single-item">
            <div className="single-title">
              {onlyOne.title}失败量{onlyOne.unit}
            </div>
            <div className="single-value">{statisticData.sendfail ?? 0}</div>
            <OneBottom time={timeMap[timeSpan]} data={statisticData} path={onlyOne.path} />
          </div>
          <div className="single-item">
            {statisticData.chargeSmsCount != null ? (
              <>
                <div className="single-title">发送量计费{statisticData.chargeSmsCount}条</div>
                <div className="single-value">费用（元） {statisticData.cost ?? 0}</div>
              </>
            ) : (
              <>
                <div className="single-title">费用（元）</div>
                <div className="single-value">{statisticData.cost ?? 0}</div>
              </>
            )}
            <OneBottom time={timeMap[timeSpan]} data={statisticData} path={onlyOne.path} />
          </div>
        </div>
      </Spin>
    </div>
  );
};

export default OneOfOne;
